import './App.css';
import React, { useEffect, useState } from 'react';
import { Select, Button, Modal } from 'antd';

const { Option } = Select;

function App() {
  // 定义状态以存储选中的英雄和游戏区服
  const [selectedHero, setSelectedHero] = useState(null);
  const [selectedServer, setSelectedServer] = useState(null);
  const [resultData, setResultData] = useState(null); // 用于存储查询结果
  const [heroList, setHeroList] = useState([]); // 用于存储英雄列表
  const [loading, setLoading] = useState(true); // 用于控制加载状态
  const fetchHeroList = async () => {
    setLoading(true); // 开始加载
    try {
      const response = await fetch('https://api.xxoo.team/hero/getHeroList.php');
      const data = await response.json();

      // 创建一个数组来存储所有的英雄选项
      const heroes = data.data.map(hero => ({
        cname: hero.cname,
        title: hero.title,
        iconUrl: hero.iconUrl,
      }));

      setHeroList(heroes); // 更新英雄列表状态
    } catch (error) {
      console.error('Error fetching hero list:', error);
    } finally {
      setLoading(false); // 结束加载
    }
  };

  // 在组件挂载时获取英雄列表
  useEffect(() => {
    fetchHeroList();
  }, []); // 空依赖数组表示只在组件初次挂载时执行


  const handleHeroChange = (value) => {
    setSelectedHero(value); // 更新选中的英雄状态
  };

  // 处理游戏区服选择变化
  const handleServerChange = (value) => {
    setSelectedServer(value); // 更新选中的区服状态
  };

  // 查询战力的处理函数
  const handleSearch = () => {
    // 在这里可以执行查询的逻辑，使用 selectedHero 和 selectedServer
    console.log('选择的英雄:', selectedHero);
    console.log('选择的区服:', selectedServer);
    if (!selectedHero || !selectedServer) {

      const modalConfig = {
        title: '警告',
        content: '请选择您想要查询的英雄和游戏区服，以便我们为您提供准确的战力信息。',
        okText: '知道了',
        onOk: () => console.log('Warning modal closed'),
      };
      Modal.warning(modalConfig);
      return;
    }
    // 你可以在这里添加实际的查询逻辑
    fetch(`https://www.sapi.run/hero/select.php?hero=${selectedHero}&type=${selectedServer}`)
      .then(response => response.json())
      .then(data => {
        console.log(data);
        setResultData(data); // 更新状态以存储查询结果
      })
  };
  return (
    <><meta name="viewport" content="width=device-width, initial-scale=1.0"></meta><div className="App">
      <div className='title'>
        <div className='title-morphism'>
          王者荣耀英雄战力排名查询
        </div>
      </div>
      <div className='check'>
        <div className='glass-morphism'>
          <div className='choice_hero_title'>
            英雄选择
          </div>
          <div className='choice_hero'>
            <Select
              className="select"
              style={{ width: '20vh', height: '4vh', fontSize: '2vh' }}
              showSearch
              placeholder="请选择或搜索英雄"
              filterOption={(input, option) =>
                (option?.children ?? "").toLowerCase().includes(input.toLowerCase())
              }
              onChange={handleHeroChange}
              loading={loading}
              value={selectedHero}
              allowClear
              optionFilterProp="children"
              optionLabelProp="label" // 关键：指定显示哪个字段作为选中后的展示
            >
              {heroList.map(hero => (
                <Option key={hero.cname} value={hero.cname} label={hero.cname}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <img
                        src={hero.iconUrl}
                        alt={hero.cname}
                        style={{ width: 20, height: 20, marginRight: 8 }}
                      />
                      {hero.cname}
                    </div>
                    <span style={{ fontSize: '12px', color: '#888' }}>
                      {hero.title}
                    </span>
                  </div>
                </Option>
              ))}
            </Select>
          </div>
          <div className='gameAreaService_title'>
            游戏区服
          </div>
          <div className='gameAreaService'>
            <Select className='select' defaultValue="请选择游戏区服" style={{ width: '20vh', height: '4vh', fontSize: '2vh' }}
              onChange={handleServerChange} // 增加 onChange 事件
            >
              <Select.Option value="iwx">ios微信区</Select.Option>
              <Select.Option value="awx">安卓微信区</Select.Option>
              <Select.Option value="iqq">iosQQ区</Select.Option>
              <Select.Option value="aqq">安卓QQ区</Select.Option>
            </Select>
          </div>
          <div className='search'>
            <Button className='button' type="primary" size="large" onClick={handleSearch}>查询战力</Button>
          </div>
          <div className="result-container">
            {resultData && (
              <div className='result'>
                <div className='result-content'>
                  <h3>查询结果:</h3>
                  {/* 插入图片 */}
                  <img src={resultData.data.photo} alt="Hero Image" style={{ width: '10vw', height: '15vh' }} />
                  <p>英雄名称: {resultData.data.alias}</p>
                  <p>平台: {resultData.data.platform}</p>
                  <p>{resultData.data.area}:{resultData.data.areaPower}</p>
                  <p>{resultData.data.city}:{resultData.data.cityPower}</p>
                  <p>{resultData.data.province}:{resultData.data.provincePower}</p>
                  <p>国标:{resultData.data.guobiao}</p>
                  <p>更新时间:{resultData.data.updatetime}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div></>
  );
}

export default App;
